<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大宋百商图 - 游戏进行中</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: #f0e6d2 url('https://www.transparenttextures.com/patterns/paper.png');
            color: #5d4037;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 3px solid #8d6e63;
            margin-bottom: 20px;
        }
        
        .game-title {
            display: flex;
            align-items: center;
        }
        
        .game-title h1 {
            font-size: 2.2rem;
            color: #5d4037;
            margin-left: 10px;
        }
        
        .game-title i {
            font-size: 2rem;
            color: #8d6e63;
        }
        
        .game-info {
            text-align: right;
        }
        
        .game-info p {
            margin-bottom: 5px;
        }
        
        .game-content {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .game-board {
            flex: 1;
            background: rgba(237, 231, 221, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .notice-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }

        .customer-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }

        .customer-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
        }

        .customer-shop-container {
            display: grid;          /* 启用 Grid 布局 */
            grid-template-columns: repeat(5, 1fr);
            gap: 1px;               /* 图标之间的间距 */
            align-items: center;    /* 垂直居中对齐 */
            justify-content: center; /* 水平居中对齐 */
        }

        .customer-shop-icon {
            width: 16px;           /* 图标容器宽度 */
            height: 16px;          /* 图标容器高度 */
        }

        .customer-shop-icon-24 {
            width: 24px;           /* 图标容器宽度 */
            height: 24px;          /* 图标容器高度 */
        }

        .customer-shop-icon .icon {
            width: 100%;           /* 图片宽度填满容器 */
            height: 100%;          /* 图片高度填满容器 */
            object-fit: contain;   /* 保持图片比例 */
        }

        .store-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .dishes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .player-board {
            flex: 1;
            background: rgba(237, 231, 221, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .player-board h2 {
            color: #5d4037;
            border-bottom: 2px solid #8d6e63;
            padding-bottom: 10px;
            margin-bottom: 15px;
            font-size: 1.8rem;
        }
        
        .player-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .player-stats {
            display: flex;
            gap: 20px;
        }
        
        .stat-card {
            background: #f5f5f5;
            padding: 10px 15px;
            border-radius: 8px;
            text-align: center;
            min-width: 100px;
        }
        
        .stat-card .value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #8d6e63;
        }
        
        .stat-card .label {
            font-size: 0.9rem;
            color: #795548;
        }
        
        /* 新增地块样式 */
        .land-container {
            margin-top: 20px;
        }
        
        .land-title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .land-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .land-plot {
            background: #e0d6c1;
            border: 2px solid #8d6e63;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            transition: all 0.3s;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
        
        .land-plot:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .land-plot.empty {
            background: #e0d6c1;
        }
        
        .land-plot.cleared {
            background: #f5f5f5;
            border: 2px dashed #4caf50;
        }
        
        .land-plot.built {
            background: #e8f5e9;
            border: 2px solid #4caf50;
        }
        
        .land-plot.selected {
            border: 3px solid #2196f3;
            box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
        }
        
        .land-status, .stay-status {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 0.8rem;
            font-weight: bold;
            padding: 2px 5px;
            border-radius: 4px;
        }

        .stay-status.stayed {
            background: #4caf50;
            color: white;
        }
        
        .land-status.cleaning {
            background: #ffeb3b;
            color: #333;
        }
        
        .land-status.cleared {
            background: #4caf50;
            color: white;
        }
        
        .land-status.built {
            background: #2196f3;
            color: white;
        }
        
        .land-cost {
            font-size: 1.2rem;
            font-weight: bold;
            color: #d32f2f;
            margin: 5px 0;
        }
        
        .land-shop {
            font-size: 1.1rem;
            font-weight: bold;
            color: #5d4037;
            margin: 5px 0;
        }
        
        .land-income {
            background: #c8e6c9;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 0.9rem;
            display: inline-block;
        }

        .shops-container {
            margin-top: 30px;
        }
        
        .shops-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .shop-card {
            background: white;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            position: relative;
            transition: transform 0.3s;
        }
        
        .shop-card:hover {
            transform: translateY(-5px);
        }
        
        .shop-icon {
            font-size: 2rem;
            margin-bottom: 5px;
            color: #8d6e63;
        }
        
        .shop-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .shop-income {
            background: #e8f5e9;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 0.9rem;
        }
        
        .menu-panels {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .menu-panel {
            background: #f5f5f5;
            border-radius: 8px;
            padding: 15px;
            display: none;
        }
        
        .menu-panel.active {
            display: block;
        }

        /* 建造面板优化 */
        .build-panels {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .build-panel {
            background: #f5f5f5;
            border-radius: 8px;
            padding: 15px;
            display: none;
        }
        
        .build-panel.active {
            display: block;
        }
        
        .build-info {
            margin: 10px 0;
            text-align: center;
        }
        
        .cost-breakdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 10px 0;
        }
        
        .cost-item {
            text-align: center;
        }
        
        .cost-value {
            font-weight: bold;
        }
        
        .total-cost {
            font-size: 1.2rem;
            font-weight: bold;
            color: #d32f2f;
            margin: 10px 0;
            text-align: center;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .action-buttons button {
            flex: 1;
        }

        .game-controls {
            flex: 0 0 300px;
            background: rgba(237, 231, 221, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .phase-indicator {
            text-align: center;
            padding: 10px;
            margin-bottom: 20px;
            background: #8d6e63;
            color: white;
            border-radius: 8px;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        .action-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            display: none;
        }
        
        .action-card.active {
            display: block;
        }
        
        .action-card h3 {
            color: #5d4037;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .menu-options, .shop-options, .serve-options {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 10px;
        }
        
        .option-card {
            position: relative;
            background: #f5f5f5;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .option-card:hover {
            background: #e0e0e0;
        }
        
        .option-card.selected {
            background: #c8e6c9;
            border: 2px solid #4caf50;
        }
        
        .serve-customer {
            text-align: center;
        }
        
        .customer-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .customer-icon {
            font-size: 3rem;
            color: #8d6e63;
            margin-bottom: 15px;
        }
        
        .customer-name {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .customer-desc {
            font-style: italic;
            color: #795548;
            margin-bottom: 15px;
        }
        
        .income-breakdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }
        
        .income-item {
            text-align: center;
        }
        
        .income-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #4caf50;
        }
        
        .action-button {
            display: block;
            width: 100%;
            padding: 12px;
            background: #8d6e63;
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 15px;
            transition: all 0.3s;
        }
        
        .action-button:hover {
            background: #6d4c41;
        }
        
        .action-button:disabled {
            background: #bdbdbd;
            cursor: not-allowed;
        }
        
        .other-players {
            margin-top: 30px;
        }
        
        .players-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .other-player {
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .player-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .player-shops {
            font-size: 0.9rem;
            color: #795548;
        }
        
        .game-message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(76, 175, 80, 0.9);
            color: white;
            padding: 15px 30px;
            border-radius: 8px;
            font-weight: bold;
            display: none;
            z-index: 1000;
        }
        
        @media (max-width: 900px) {
            .game-content {
                flex-direction: column;
            }
            
            .game-controls {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="game-title">
                <i class="fas fa-landmark"></i>
                <h1>大宋百商图</h1>
            </div>
            <div class="game-info">
                <p>游戏ID: <span id="game-id-display">{{ game_id }}</span></p>
                <p>玩家ID: <span id="player-id-display">{{ player_id }}</span></p>
                <p>回合: <span id="turn-count">0</span></p>
            </div>
        </header>
        
        <div class="game-message" id="game-message"></div>
        
        <div class="game-content">
            <div class="game-board">
                <h2><i class="fa-solid fa-dumpster"></i> <span id="notice-name">告示牌</span></h2>
                <div class="notice-info" id="notice-info">
                    <!-- 告示会动态添加到这里 -->
                </div>

                <h2><i class="fas fa-user"></i> <span id="customer-name">客人队列</span></h2>
                <div class="customer-info">
                    <div class="customer-grid" id="customer-grid">
                        <!-- 客人会动态添加到这里 -->
                    </div>
                </div>
                
                <h2><i class="fas fa-store"></i> <span id="store-name">店铺展示区</span></h2>
                <div class="store-grid" id="store-grid">
                    <!-- 待售店铺会动态添加到这里 -->
                </div>

                <h2><i class="fa-solid fa-beer-mug-empty"></i> <span id="dishes-name">菜品展示区</span></h2>
                <div class="dishes-grid" id="dishes-grid">
                    <!-- 待售菜品会动态添加到这里 -->
                </div>
            </div>

            <div class="player-board">
                <h2><i class="fas fa-user"></i> <span id="player-name">我的商业版图</span></h2>
                
                <div class="player-info">
                    <div class="player-stats">
                        <div class="stat-card">
                            <div class="value" id="money">30</div>
                            <div class="label">白银 (两)</div>
                        </div>
                        <div class="stat-card">
                            <div class="value" id="shops-count">0</div>
                            <div class="label">店铺数量</div>
                        </div>
                        <div class="stat-card">
                            <div class="value" id="menu-count">8</div>
                            <div class="label">菜品数量</div>
                        </div>
                    </div>
                </div>
                
                <!-- 新增地块系统 -->
                <div class="land-container">
                    <div class="land-title">
                        <i class="fas fa-store"></i>
                        <h3>我的店铺</h3>
                    </div>
                    <div class="land-grid" id="land-grid">
                        <!-- 地块会动态添加到这里 -->
                    </div>
                </div>
                
                <div class="other-players">
                    <h3><i class="fas fa-users"></i> 其他玩家</h3>
                    <div class="players-grid" id="other-players">
                        <!-- 其他玩家信息会动态添加到这里 -->
                    </div>
                </div>
            </div>
            
            <div class="game-controls">
                <div class="phase-indicator" id="phase-indicator">购买建造阶段</div>
                
                <!-- 建造店铺阶段 -->
                <div class="action-card" id="build-phase">
                    <h3><i class="fas fa-hammer"></i> 建造店铺</h3>
                    
                    <div class="build-panels">
                        <!-- 操作选择面板 -->
                        <div class="build-panel" id="build-action-select">
                            <p>请选择要执行的操作：</p>
                            <div class="action-buttons">
                                <button class="action-button" id="clean-land-btn">购买店铺</button>
                                <button class="action-button" id="build-shop-btn">建造店铺</button>
                            </div>
                        </div>
                        
                        <!-- 购买店铺面板 -->
                        <div class="build-panel" id="clean-land-panel">
                            <h4><i class="fas fa-broom"></i> 购买店铺</h4>
                            <div class="build-info" id="clean-land-grid">
                                    <!-- 可清理的地块会动态添加 -->
                            </div>
                            <div class="shop-options" id="build-shop-options">
                                <!-- 店铺选项会动态添加 -->
                            </div>
                            <div class="action-buttons">
                                <button class="action-button" id="confirm-clean">确认清理</button>
                                <button class="action-button" id="cancel-clean">取消</button>
                            </div>
                        </div>
                        
                        <!-- 建造店铺面板 -->
                        <div class="build-panel" id="build-shop-panel">
                            <h4><i class="fas fa-store"></i> 建造店铺</h4>
                            <div class="build-info">
                                <p>选择地块和店铺类型</p>
                                <div class="total-cost">建造费用: <span id="building-cost">0</span>两</div>
                            </div>
                            <div class="land-grid" id="build-land-grid">
                                <!-- 可建造的地块会动态添加 -->
                            </div>
                            <div class="shop-options" id="build-shop-options">
                                <!-- 店铺选项会动态添加 -->
                            </div>
                            <div class="action-buttons">
                                <button class="action-button" id="confirm-build">确认建造</button>
                                <button class="action-button" id="cancel-build">取消</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 优化菜单阶段 -->
                <div class="action-card" id="menu-phase">
                    <h3><i class="fas fa-utensils"></i> 优化菜单</h3>

                    <div class="menu-panels">
                        <!-- 操作选择面板 -->
                        <div class="menu-panel" id="menu-action-select">
                            <p>请选择要执行的操作：</p>
                            <div class="action-buttons">
                                <button class="action-button" id="buy-menu-btn">购买菜单</button>
                                <button class="action-button" id="remove-menu-btn">移除菜单</button>
                            </div>
                        </div>

                        <!-- 购买菜单面板 -->
                        <div class="menu-panel" id="buy-menu-panel">
                            <h4><i class="fas fa-broom"></i> 购买菜品</h4>
                            <div class="build-info">
                                <p>选择购买的菜品等级</p>
                                <div class="total-cost">购买费用: <span id="buy-menu-cost">0</span>两</div>
                            </div>
                            <div class="menu-grid" id="buy-menu-grid">
                                <!-- 可购买的菜单会动态添加 -->
                            </div>
                            <div class="action-buttons">
                                <button class="action-button" id="confirm-buy">确认购买</button>
                                <button class="action-button" id="cancel-buy">取消</button>
                            </div>
                        </div>

                        <!-- 移除菜单面板 -->
                        <div class="menu-panel" id="remove-menu-panel">
                            <h4><i class="fas fa-store"></i> 移除菜品</h4>
                            <div class="build-info">
                                <p>选择移除的菜品等级</p>
                                <div class="total-cost">移除费用: <span id="remove-menu-cost">0</span>两</div>
                            </div>
                            <div class="menu-grid" id="remove-menu-grid">
                                <!-- 可移除的菜单会动态添加 -->
                            </div>
                            <div class="action-buttons">
                                <button class="action-button" id="confirm-remove">确认移除</button>
                                <button class="action-button" id="cancel-remove">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="action-card" id="confirm-serve-phase">
                    <button class="action-button" id="confirm-serve-btn">进入服务客人阶段</button>
                </div>
                
                <!-- 招待客人阶段 -->
                <div class="action-card" id="serve-phase">
                    <h3><i class="fas fa-user-friends"></i> 招待客人</h3>
                    <p>招待一位客人获取收入</p>

                    <div class="serve-customer">
                        <div class="serve-options" id="serve-options">
                            <!-- 招待的客人选项会动态添加 -->
                        </div>
                        <button class="action-button" id="serve-button">招待客人</button>
                    </div>
                </div>
                

                
                <!-- 招待结果 -->
                <div class="action-card" id="serve-result">
                    <h3><i class="fas fa-coins"></i> 招待结果</h3>
                    <div class="customer-card">
                        <div class="customer-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="customer-name" id="customer-name-result">官员</div>
                        <div class="customer-desc" id="customer-desc-result">俸禄优厚</div>
                        
                        <div class="income-breakdown">
                            <div class="income-item">
                                <div>基础收入</div>
                                <div class="income-value" id="base-income">5</div>
                            </div>
                            <div class="income-item">
                                <div>+ 等待加成</div>
                                <div class="income-value" id="stay-income">2</div>
                            </div>
                            <div class="income-item">
                                <div>+ 店铺加成</div>
                                <div class="income-value" id="shop-income">3</div>
                            </div>
                        </div>
                        
                        <div style="font-size: 1.2rem; margin-top: 15px;">
                            总计收入: <span class="income-value" id="total-income">10</span> 两白银
                        </div>
                    </div>
                    <button class="action-button" id="next-phase">继续</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        const socket = io();
        const gameId = "{{ game_id }}";
        const playerId = "{{ player_id }}";
        let cur_playerId = '';
        let gameState = null;
        let selectedPlot = null;
        let selectedShop = null;
        let selectedMenu = null;
        let selectedCustomer = null;
        
        // 定义地块清理费用（全局作用域）
        const plotCleaningCosts = [0, 2, 3, 4, 7, 8, 9, 10]; // 各地块清理费用
        
        // 加入游戏
        document.addEventListener('DOMContentLoaded', () => {
            socket.emit('join', {
                game_id: gameId,
                player_id: playerId
            });
            
            // 绑定建造按钮事件
            document.getElementById('clean-land-btn').addEventListener('click', showCleanLandPanel);
            document.getElementById('build-shop-btn').addEventListener('click', showBuildShopPanel);
            document.getElementById('cancel-clean').addEventListener('click', showActionSelect);
            document.getElementById('cancel-build').addEventListener('click', showActionSelect);
            document.getElementById('confirm-clean').addEventListener('click', confirmCleanLand);
            document.getElementById('confirm-build').addEventListener('click', confirmBuildShop);

            // 绑定菜单按钮事件
            document.getElementById('buy-menu-btn').addEventListener('click', showBuyMenuPanel);
            document.getElementById('remove-menu-btn').addEventListener('click', showRemoveMenuPanel);
            document.getElementById('cancel-buy').addEventListener('click', showActionSelect);
            document.getElementById('cancel-remove').addEventListener('click', showActionSelect);
            document.getElementById('confirm-buy').addEventListener('click', confirmBuyMenu);
            document.getElementById('confirm-remove').addEventListener('click', confirmRemoveMenu);

            document.getElementById('confirm-serve-btn').addEventListener('click', confirmServePhase);
        });
        
        // 监听游戏状态更新
        socket.on('update_game', (state) => {
            console.log('Game updated:', state);
            gameState = state;
            updateGameUI();
        });
        
        // 监听服务结果
        socket.on('serve_result', (result) => {
            showMessage(result.customer.name + ' 招待结果');
            // 确保 playerId 正确
            if (!playerId) {
                playerId = localStorage.getItem('player_id');
            }
            if (playerId == gameState.current_player) {
                document.getElementById('customer-name-result').textContent = result.customer.name;
                document.getElementById('customer-desc-result').textContent = result.customer.description;
                document.getElementById('base-income').textContent = result.income;
                document.getElementById('stay-income').textContent = result.stay_bonus;
                document.getElementById('shop-income').textContent = result.shop_bonus;
                document.getElementById('total-income').textContent = result.total_income;
                
                // 显示结果面板
                document.getElementById('serve-result').classList.add('active');
                document.getElementById('serve-phase').classList.remove('active');
            }
        });
        
        // 监听游戏结束
        socket.on('game_end', (result) => {
            showMessage(`${result.name} 获得了胜利！成为汴京首富！`);
        });
        
        // 监听游戏消息
        socket.on('game_message', (data) => {
            showMessage(data.message);
        });
        
        // 更新游戏UI
        function updateGameUI() {
            if (!gameState) return;
            
            // 更新回合数
            document.getElementById('turn-count').textContent = gameState.turn || 0;
            
            // 更新游戏版图信息
            updateGameBoard();

            // 更新阶段指示器
            const phaseNames = {
                'build': '购买建造阶段',
                'menu': '优化菜单阶段',
                'serve': '招待客人阶段',
                'end': '游戏结束'
            };
            document.getElementById('phase-indicator').textContent = phaseNames[gameState.phase] || '游戏进行中';
            
            // 确保 playerId 正确
            if (!playerId) {
                playerId = localStorage.getItem('player_id');
            }
            
            // 更新玩家信息
            const currentPlayer = gameState.players[playerId];
            if (currentPlayer) {
                document.getElementById('player-name').textContent = currentPlayer.name;
                document.getElementById('money').textContent = currentPlayer.money;
                document.getElementById('shops-count').textContent = currentPlayer.shops ? currentPlayer.shops.length : 0;
                document.getElementById('menu-count').textContent = currentPlayer.menu.length;
                
                // 更新地块显示
                updateLandPlots(currentPlayer);
            }
            
            // 更新其他玩家信息
            const otherPlayers = document.getElementById('other-players');
            otherPlayers.innerHTML = '';
            
            for (const [id, player] of Object.entries(gameState.players)) {
                if (id === playerId) continue;
                
                const playerCard = document.createElement('div');
                playerCard.className = 'other-player';
                
                // 处理不同格式的玩家数据
                let playerName = player.name || id;
                let money = player.money || 0;
                let shopsCount = player.shops_count || (player.shops ? player.shops.length : 0);
                let menuCount = player.menu.length || 8;
                
                playerCard.innerHTML = `
                    <div class="player-header">
                        <div class="player-name">${playerName}</div>
                        <div class="player-money">${money}两</div>
                    </div>
                    <div class="player-shops">
                        <span>店铺: ${shopsCount}间</span>
                        <span>菜单: ${menuCount}张</span>
                    </div>
                `;
                otherPlayers.appendChild(playerCard);
            }
            
            // 根据阶段更新操作面板
            if (gameState.current_player === playerId) {
                switch(gameState.phase) {
                    case 'build':
                        document.getElementById('build-phase').classList.add('active');
                        document.getElementById('menu-phase').classList.add('active');
                        document.getElementById('confirm-serve-phase').classList.add('active');
                        document.getElementById('serve-phase').classList.remove('active');
                        document.getElementById('serve-result').classList.remove('active');
                        showActionSelect();
                        break;
                    case 'serve':
                        document.getElementById('build-phase').classList.remove('active');
                        document.getElementById('menu-phase').classList.remove('active');
                        document.getElementById('confirm-serve-phase').classList.remove('active');
                        document.getElementById('serve-phase').classList.add('active');
                        document.getElementById('serve-result').classList.remove('active');
                        showServeSelect();
                        break;
                }
            } else {
                // 不是当前玩家，隐藏所有操作面板
                document.getElementById('menu-phase').classList.remove('active');
                document.getElementById('serve-phase').classList.remove('active');
                document.getElementById('build-phase').classList.remove('active');
                document.getElementById('serve-result').classList.remove('active');
            }
        }
        
        // 更新游戏版图
        function updateGameBoard() {
            updateNotice();
            updateCustomers();
            updateStores();
            updateDishes();
        }

        function updateNotice() {
            const noticeGrid = document.getElementById('notice-info');
            noticeGrid.innerHTML = '';
            if (gameState.notice) {
                const noticeCard = document.createElement('div');
                noticeCard.className = 'notice-card';
                noticeCard.textContent = gameState.notice;
                noticeGrid.appendChild(noticeCard);
            } else {
                const noticeCard = document.createElement('div');
                noticeCard.className = 'notice-card';
                noticeCard.textContent = '无公告';
                noticeGrid.appendChild(noticeCard);
            }
        }

        function updateCustomers() {
            const customerGrid = document.getElementById('customer-grid');
            customerGrid.innerHTML = '';

            for (let i = 0; i < 6; i++) {
                let customerName = "......";
                let customerDesc = "暂无来客";
                let customer = null;
                if (i < gameState.customer_num) {
                    const customer_id = gameState.customer_list[i][0];
                    customer = gameState.customer_types.find(customer => customer.id === customer_id.split("_")[0]);
                    if(customer){
                        customerName = customer.name;
                        customerDesc = customer.description;
                    }
                }
                
                const customerCard = document.createElement('div');
                customerCard.className = 'stat-card';
                let customer_info = `
                    <div class="customer-icon"><i class="fas fa-user-tie"></i></div>
                    <div class="customer-name" id="customer-name">${customerName}</div>
                    <div class="customer-desc" id="customer-desc">${customerDesc}</div>
                `;

                let shop_info = "";
                if (customer) {
                    shop_info += `<div class="customer-shop-container">`
                    customer.shop.forEach(shop_type => {
                        const shop = gameState.shop_types.find(shop => shop.id === shop_type);
                        shop_info += `<div class="customer-shop-icon"><img src="/static/icons/${shop.icon}" alt="shop icon" class="icon"></div>`;
                    });   
                    shop_info += `</div>`;
                }

                customerCard.innerHTML = customer_info + shop_info;
                customerGrid.appendChild(customerCard);
            }
        }

        function updateStores() {
            const storeGrid = document.getElementById('store-grid');
            storeGrid.innerHTML = '';

            for (let i = 0; i < 4; i++) {
                const store = gameState.shop_types.find(shop => shop.id === gameState.shop_list[i].split("_")[0]);
                const storeCard = document.createElement('div');
                storeCard.className = 'stat-card';
                storeCard.innerHTML = `
                    <div class="shop-icon"><img src="/static/icons/${store.icon}" alt="shop icon" class="icon"></div>
                    <div class="shop-name">${store.name}</div>
                    <div>建造费用: ${store.cost}两</div>
                    <div class="shop-income">+${store.income}两/客</div>
                `;
                storeGrid.appendChild(storeCard);
            }
        }

        function updateDishes() {
            const dishesGrid = document.getElementById('dishes-grid');
            dishesGrid.innerHTML = '';

            for (let i = 0; i < 4; i++) {
                const menu = gameState.menu_levels[i]
                const menuCard = document.createElement('div');
                menuCard.className = 'stat-card';
                menuCard.innerHTML = `
                    <div class="shop-icon"><i class="fas fa-store"></i></div>
                    <div class="shop-name">${menu.name}</div>
                    <div>购买费用: ${menu.cost}两</div>
                    <div class="shop-income">+${menu.income}两/客</div>
                `;
                dishesGrid.appendChild(menuCard);
            }
        }

        // 更新地块显示
        function updateLandPlots(player) {
            const landGrid = document.getElementById('land-grid');
            landGrid.innerHTML = '';
            
            // 确保玩家有地块数据，如果没有则初始化
            if (!player.plots) {
                player.plots = Array(8).fill('empty');
            }
            
            for (let i = 0; i < 8; i++) {
                const plot = document.createElement('div');
                plot.className = `land-plot ${player.plots[i]}`;
                plot.dataset.index = i;
                
                let statusText = '';
                let content = '';
                
                if (player.plots[i] === 'empty') {
                    statusText = '<div class="land-status cleaning">待清理</div>';
                    content = `
                        <div class="land-cost">清理费用: ${plotCleaningCosts[i]}两</div>
                    `;
                } else if (player.plots[i] === 'cleared') {
                    statusText = '<div class="land-status cleared">已清理</div>';
                    const shop = player.shops.find(s => s.plot === i);
                    if (shop) {
                        const shopType = gameState.shop_types.find(s => s.id === shop.type);
                        content = `
                            <div class="shop-icon"><img src="/static/icons/${shopType.icon}" alt="shop icon" class="icon"></div>
                            <div class="shop-name">${shopType.name}</div>
                        `;
                    }
                } else {
                    statusText = '<div class="land-status built">已建造</div>';
                    // 已建造店铺
                    const shop = player.shops.find(s => s.plot === i);
                    if (shop) {
                        const shopType = gameState.shop_types.find(s => s.id === shop.type);
                        content = `
                            <div class="shop-icon"><img src="/static/icons/${shopType.icon}" alt="shop icon" class="icon"></div>
                            <div class="shop-name">${shopType.name}</div>
                        `;
                    }
                }
                
                plot.innerHTML = statusText + content;
                landGrid.appendChild(plot);
            }
        }
        
        // 显示操作选择面板
        function showActionSelect() {
            document.getElementById('build-action-select').classList.add('active');
            document.getElementById('clean-land-panel').classList.remove('active');
            document.getElementById('build-shop-panel').classList.remove('active');
            selectedPlot = null;
            selectedShop = null;

            document.getElementById('menu-action-select').classList.add('active');
            document.getElementById('buy-menu-panel').classList.remove('active');
            document.getElementById('remove-menu-panel').classList.remove('active');
            selectedMenu = null;
        }
        
        // 显示清理地块面板
        function showCleanLandPanel() {
            document.getElementById('build-action-select').classList.remove('active');
            document.getElementById('clean-land-panel').classList.add('active');
            document.getElementById('build-shop-panel').classList.remove('active');
            
            const cleanLandGrid = document.getElementById('clean-land-grid');
            cleanLandGrid.innerHTML = '';
            
            const player = gameState.players[playerId];
            if (!player.plots) player.plots = Array(8).fill('empty');
            
            for (let i = 0; i < 8; i++) {
                if (player.plots[i] !== 'empty') continue;
                
                cleanLandGrid.innerHTML = `
                    <p>下一块要清理下的地块：地块${i + 1}</p>
                    <div class="total-cost">清理费用: <span id="cleaning-cost">${plotCleaningCosts[i]}</span>两</div>
                `;
                selectedPlot = i;
                break;
            }
            updateShopOptions();
        }
        
        // 显示建造店铺面板
        function showBuildShopPanel() {
            document.getElementById('build-action-select').classList.remove('active');
            document.getElementById('clean-land-panel').classList.remove('active');
            document.getElementById('build-shop-panel').classList.add('active');
            document.getElementById('building-cost').textContent = 0;
            
            const buildLandGrid = document.getElementById('build-land-grid');
            const shopOptions = document.getElementById('build-shop-options');
            
            buildLandGrid.innerHTML = '';
            shopOptions.innerHTML = '';
            
            const player = gameState.players[playerId];
            if (!player.plots) player.plots = Array(8).fill('empty');
            
            // 显示可建造的地块
            let hasClearedPlots = false;
            for (let i = 0; i < 8; i++) {
                if (player.plots[i] !== 'cleared') continue;
                
                hasClearedPlots = true;
                const plot = document.createElement('div');
                plot.className = `land-plot cleared ${selectedPlot === i ? 'selected' : ''}`;
                plot.dataset.index = i;
                
                plot.innerHTML = `
                    <div class="land-status cleared">地块 ${i + 1}</div>
                    <div class="land-plot-id">${player.shops[i].name}</div>
                `;
                
                plot.addEventListener('click', () => {
                    document.querySelectorAll('#build-land-grid .land-plot').forEach(p => {
                        p.classList.remove('selected');
                    });
                    plot.classList.add('selected');
                    selectedPlot = i;

                    // 更新费用显示
                    document.getElementById('building-cost').textContent = player.shops[i].cost;
                });
                
                buildLandGrid.appendChild(plot);
            }
            
            if (!hasClearedPlots) {
                shopOptions.innerHTML = '<div class="no-plots">没有可用的已清理地块！</div>';
            } else if (selectedPlot !== null) {
                // 更新费用显示
                document.getElementById('building-cost').textContent = player.shops[i].cost;
            }
        }
        
        // 显示购买菜单面板
        function showBuyMenuPanel() {
            document.getElementById('menu-action-select').classList.remove('active');
            document.getElementById('buy-menu-panel').classList.add('active');
            document.getElementById('remove-menu-panel').classList.remove('active');
            
            const menuOptions = document.getElementById('buy-menu-grid');
            menuOptions.innerHTML = '';
            
            gameState.menu_levels.forEach((level, index) => {
                const optionCard = document.createElement('div');
                optionCard.className = 'option-card';
                optionCard.dataset.level = level.level;
                optionCard.innerHTML = `
                    <div style="font-size: 1.5rem; margin-bottom: 5px;">
                        ${'★'.repeat(level.level)}
                    </div>
                    <div>收入: +${level.income}两</div>
                    <div>花费: ${level.cost}两</div>
                `;
                
                optionCard.addEventListener('click', () => {
                    document.querySelectorAll('.option-card').forEach(card => {
                        card.classList.remove('selected');
                    });
                    optionCard.classList.add('selected');
                    document.getElementById('buy-menu-cost').textContent = level.cost;
                    selectedMenu = level.level;
                });

                menuOptions.appendChild(optionCard);
            });
        }

        // 显示移除菜单面板
        function showRemoveMenuPanel() {
            document.getElementById('menu-action-select').classList.remove('active');
            document.getElementById('buy-menu-panel').classList.remove('active');
            document.getElementById('remove-menu-panel').classList.add('active');
            
            const menuOptions = document.getElementById('remove-menu-grid');
            menuOptions.innerHTML = '';

            const player = gameState.players[playerId];
            if (!player) return;
            
            if (player.kitchen === 0) {
                menuOptions.innerHTML = '<div class="no-menus">后厨没有菜单可以移除！</div>';
                return;
            }
            
            gameState.menu_levels.forEach((level, index) => {
                const levelCount = player.menu.slice(0, player.kitchen).filter(m => m === level.level).length;
                if (levelCount != 0) {
                    const optionCard = document.createElement('div');
                    optionCard.className = 'option-card';
                    optionCard.dataset.level = level.level;
                    optionCard.innerHTML = `
                        <div style="font-size: 1.5rem; margin-bottom: 5px;">
                            ${'★'.repeat(level.level)}
                        </div>
                        <div>收入: +${level.income}两</div>
                        <div>后厨数量: ${levelCount}张</div>
                    `;
                    
                    optionCard.addEventListener('click', () => {
                        document.querySelectorAll('.option-card').forEach(card => {
                            card.classList.remove('selected');
                        });
                        optionCard.classList.add('selected');
                        document.getElementById('remove-menu-cost').textContent = 3;
                        selectedMenu = level.level;
                    });

                    menuOptions.appendChild(optionCard);
                }
            });
        }

        // 更新店铺选项
        function updateShopOptions() {
            const shopOptions = document.getElementById('build-shop-options');
            shopOptions.innerHTML = '';
            
            if (selectedPlot === null) return;
            
            for (let i = 0; i < 4; i++) {
                const optionCard = document.createElement('div');
                const shop = gameState.shop_types.find(shop => shop.id === gameState.shop_list[i].split("_")[0])
                optionCard.className = `option-card ${selectedShop === shop.id ? 'selected' : ''}`;
                optionCard.dataset.type = shop.id;
                optionCard.dataset.cost = shop.cost;
                optionCard.innerHTML = `
                    <div class="shop-icon"><img src="/static/icons/${shop.icon}" alt="shop icon" class="icon"></div>
                    <div class="shop-name">${shop.name}</div>
                    <div>建造费用: ${shop.cost}两</div>
                    <div class="shop-income">+${shop.income}两/客</div>
                `;
                
                optionCard.addEventListener('click', () => {
                    document.querySelectorAll('.option-card').forEach(card => {
                        card.classList.remove('selected');
                    });
                    optionCard.classList.add('selected');
                    selectedShop = gameState.shop_list[i];
                });
                
                shopOptions.appendChild(optionCard);
            }
        }
        
        // 确认清理地块
        function confirmCleanLand() {
            if (selectedPlot === null) {
                showMessage('请选择一个地块进行清理');
                return;
            }

            if (selectedShop === null) {
                showMessage('请选择一种店铺类型');
                return;
            }
            
            socket.emit('clean_plot', {
                game_id: gameId,
                plot_index: selectedPlot,
                shop_type: selectedShop
            });
            
            // 重置选择
            selectedPlot = null;
            showActionSelect();
        }
        
        // 确认建造店铺
        function confirmBuildShop() {
            if (selectedPlot === null) {
                showMessage('请选择一个地块进行建造');
                return;
            }
            
            socket.emit('build_shop', {
                game_id: gameId,
                plot_index: selectedPlot,
                player_id: playerId,
            });
            
            // 重置选择
            selectedPlot = null;
            selectedShop = null;
            showActionSelect();
        }
        
        // 确认购买菜单
        function confirmBuyMenu() {
            if (selectedMenu === null) {
                showMessage('请选择一个菜单进行购买');
                return;
            }
            
            socket.emit('buy_menu', {
                game_id: gameId,
                menu_level: selectedMenu,
                player_id: playerId
            });
            
            // 重置选择
            selectedMenu = null;
            showActionSelect();
        }

        // 确认移除菜单
        function confirmRemoveMenu() {
            if (selectedMenu === null) {
                showMessage('请选择一个菜单进行移除');
                return;
            }

            const player = gameState.players[playerId];
            if (player.menu && player.menu.length <= 6) {
                showMessage('菜品的数量不能少于6张');
                return;
            }
            
            socket.emit('remove_menu', {
                game_id: gameId,
                menu_level: selectedMenu,
                player_id: playerId
            });
            
            // 重置选择
            selectedMenu = null;
            showActionSelect();
        }
        
        // 进入服务阶段
        function confirmServePhase() {
            socket.emit('change_phase', {
                game_id: gameId,
                phase: 'serve',
                player_id: playerId
            });
        }

        // 更新服务客人选项
        function showServeSelect() {
            const customerGrid = document.getElementById('serve-options');
            customerGrid.innerHTML = '';

            for (let i = 0; i < gameState.customer_num; i++) {
                const customer_id = gameState.customer_list[i][0];
                const customer = gameState.customer_types.find(customer => customer.id === customer_id.split("_")[0]);
                let customerName = customer.name;
                let customerDesc = customer.description;
                
                const customerCard = document.createElement('div');
                customerCard.className = 'option-card';
                let customer_info = `
                    <div class="stay-status stayed">等待收益${gameState.customer_list[i][1]}两</div>
                    <div class="customer-icon"><i class="fas fa-user-tie"></i></div>
                    <div class="customer-name" id="customer-name">${customerName}</div>
                    <div class="customer-desc" id="customer-desc">${customerDesc}</div>
                `;

                let shop_info = "";
                if (customer) {
                    shop_info += `<div class="customer-shop-container">`
                    customer.shop.forEach(shop_type => {
                        const shop = gameState.shop_types.find(shop => shop.id === shop_type);
                        shop_info += `<div class="customer-shop-icon-24"><img src="/static/icons/${shop.icon}" alt="shop icon" class="icon"></div>`;
                    });   
                    shop_info += `</div>`;
                }

                customerCard.innerHTML = customer_info + shop_info;

                customerCard.addEventListener('click', () => {
                    document.querySelectorAll('.option-card').forEach(card => {
                        card.classList.remove('selected');
                    });
                    customerCard.classList.add('selected');
                    selectedCustomer = customer_id;
                });

                customerGrid.appendChild(customerCard);
            }
        }

        // 服务客人
        document.getElementById('serve-button').addEventListener('click', () => {
            socket.emit('serve_customer', { 
                game_id: gameId,
                customer_id: selectedCustomer
            });
            selectedCustomer = null;
        });
        
        // 继续按钮
        document.getElementById('next-phase').addEventListener('click', () => {
            document.getElementById('serve-result').classList.remove('active');
            socket.emit('finish_serve', { 
                game_id: gameId,
            });
        });
        
        // 显示消息
        function showMessage(message) {
            const msgEl = document.getElementById('game-message');
            msgEl.textContent = message;
            msgEl.style.display = 'block';
            
            setTimeout(() => {
                msgEl.style.display = 'none';
            }, 3000);
        }
    </script>
</body>
</html>